{include file="common/header" /}
<style type="text/css">
    .layui-form-switch{
        margin-top: 0;
    }
    .orderidclass{
        width:40px;text-align:center;margin-right:3px;height:18px;
    }
    .imgdev{
        text-align: center;
        margin-top:20px;
    }
    .imgdev img{
        width:200px;
        /*height:100%;*/
    }
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息({$title}-{$module})</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" autocomplete="off" class="layui-input" value="{:input('param.title')}" >
                            </div>
                        </div>
                        
                        {if $module == 'product'/}
                        <div class="layui-inline">
                            <label class="layui-form-label">所属栏目</label>
                            <div class="layui-input-inline">
                                <select name="cate_id">
                                  <option value="">请选择</option>
                                  {volist name="$treeList" id="vo"}
                                  <option value="{$vo.id}" {if $vo.id == input("param.cate_id") /} selected="" {/if}  {if $vo.disabled == "true" /} disabled {/if} >{$vo.catname|RAW}({$vo.level}级)</option>
                                  {/volist}
                                </select>
                            </div>
                        </div>
                        {/if}

                                 
                        <div class="layui-inline">
                            <button type="submit"  class="layui-btn layui-btn-primary" ><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <div class="layuimini-container" style="margin-top: 10px;">
            <div class="layuimini-main">
                
                {if $module != 'about' /}
                    {if condition="isset($catid)"}
                        <div class="layui-btn-group">   
                                <a href="{:url(CONTROLLER_NAME.'/add',array('catid'=>$catid))}"><button class="layui-btn layui-btn-sm" >添加</button></a>
                        </div>   

                    {else/}
                        <div class="layui-btn-group">     
                                <a href="{:url(CONTROLLER_NAME.'/add')}"><button class="layui-btn layui-btn-sm" >添加</button></a>
                        </div>   
                    {/if}
                            <!-- <a data-url="{:url('sort',array('table'=>$module))}"  class="layui-btn layui-btn-sm layui-btn-normal">更改排序</a>-->
                            <a  class="layui-btn layui-btn-sm layui-btn-danger all_del">删除</a> 
                    {if condition="isset($catid)"}
                            <a href="{:url('admin/category/index')}"  class="layui-btn layui-btn-sm layui-btn-primary">返回上一层</a>
                    {/if}
                {/if}
            </div>
        </div>

        <table class="layui-table layui-form" lay-size="sm">
          <!-- <colgroup>
            <col width="80">
            <col width="80">
            <col>
            <col width="100">
            <col width="120">
            <col width="180">
            <col >
          </colgroup> -->
          <thead>
            <tr>
                <th style="width:30px;"><input type="checkbox" id="checkAll" name="checkid" lay-skin="primary" lay-filter="checkAll"></th>
                <th style="width:30px;">ID</th>
                {if $module == 'product' /}
                <th style="width:100px;">栏目</th>
                {/if}

                {volist name="$fields_res" id="vo"}
                <th>{$vo.name}</th>
                {/volist}
                <th>操作</th>
            </tr>
          </thead>
          <tbody>
                {volist name="res" id="vo"}
                <tr id="data{$vo['id']}" class="gradeX">
                    <td><input class="materials" orderid="{$vo.orderid}" type="checkbox" name="checkid[]" id="checkid[]" value="{$vo['id']}" lay-skin="primary" lay-filter="materials" /></td>
                    
                    <td>{$vo.id}</td>
                    {if isset($vo.cate_names) /}
                    <td>{$vo.cate_names}</td>
                    {/if}

                    {volist name="$fields_res" id="vo2"}
                        <!-- 单图片类型 -->
                        {if $vo2.type == 'image' /}
                            <td>
                                {if $vo[$vo2.field] /}
                                <a href="{$vo[$vo2.field]}" target="_blank" ><img src="{$vo[$vo2.field]}" style="width: 40px;"></a>
                                {else /}
                                <img src="__STATIC__/admin/img/default.png" style="width: 40px;">
                                {/if}
                            </td>
                        {elseif $vo2.type == 'images' /}
                            <td>
                                {if $vo[$vo2.field] /}
                                <a href="javascript:;" onclick="openPicarr(this)" data-picarr="{$vo[$vo2.field]}"  ><img src="{:explode(',',$vo[$vo2.field])[0]}" style="width: 40px;"></a><div style="cursor: pointer;" onclick="openPicarr(this)" data-picarr="{$vo[$vo2.field]}" >查看组图</div>
                                {else /}
                                <img src="__STATIC__/admin/img/default.png" style="width: 40px;">
                                {/if}
                            </td>
                        {elseif $vo2.type == 'date' || $vo2.type == 'datetime'  /}
                            <td>
                                {if $vo2.setup.datetype == 'timestamp' /} {$vo[$vo2.field] | date="Y-m-d"} {else/} {$vo[$vo2.field]} {/if}
                            </td>
                        {elseif $vo2.type == 'radio' && count($vo2.setup.options) == 2 /}
                            <td>
                                <input type="checkbox" data-table="{:CONTROLLER_NAME}" data-id_name="id" data-id="{$vo.id}" data-field="{$vo2.field}" lay-skin="switch" lay-text="{$vo2.setup.options[0][0]}|{$vo2.setup.options[1][0]}" lay-filter="switchIsOpen" {if $vo[$vo2.field] == $vo2.setup.options[0][1] /} checked {/if}>
                            </td>

                        {elseif $vo2.field == 'orderid'  /}
                            <td>
                                <!-- <input id="ord{$vo.id}" name="orderid" type="text" value="{$vo[$vo2.field]}" class="orderidclass">
                                <a data-id="{$vo.id}" class="layui-btn layui-btn-xs tysort">更新</a> -->

                                <input type="number" name="" onBlur="checkSort(this)" data-table="{:CONTROLLER_NAME}" data-id_name="id" data-id="{$vo.id}" data-field="orderid" value="{$vo.orderid}" class="orderidclass">
                            </td>
                        {else /}
                            <td>{$vo[$vo2.field]}</td>
                        {/if}
                    {/volist}

                    <td class="center">
                        {if condition="isset($catid)"}
                        <a href="{:url(CONTROLLER_NAME.'/edit',array('catid'=>$catid,'id'=>$vo['id']))}"  class="layui-btn layui-btn-xs">修改</a>
                        {else/}
                        <a href="{:url(CONTROLLER_NAME.'/edit',array('id'=>$vo['id']))}"  class="layui-btn layui-btn-xs">修改</a>
                        {/if}
                        <a data-url="{:url(CONTROLLER_NAME.'/delete',array('table'=>$module,'ids'=>$vo['id']))}" class="delete layui-btn layui-btn-xs layui-btn-danger">删除</a>
                    </td>
                </tr>
                {/volist}
            </tboot>
        </table>

        {if $total > 0 && $total <= 10 /}
        <div class="pagination">  <a data-text="首页" href="javascript:;">首页</a> <a data-text="上一页" href="javascript:;">上一页</a> <a class="on" href="javascript:;">1</a> <a href="javascript:;">下一页</a> <a href="javascript:;">尾页</a> <span>共{$total}条记录  第1页/共1页</span> </div>
        {else/}
            {$page|raw}
        {/if}
    </div>
</div>

<div id="showPicarr" style="display: none">
    
    <div class="layui-carousel" id="test1" lay-filter="test1">
        <div id="divimg" carousel-item>
            <!-- <div class="imgdev"><a href="/upload/2023/10-24/79098de8f0eb599b950d063eda3f1632.png" target="_blank" ><img src="/upload/2023/10-24/79098de8f0eb599b950d063eda3f1632.png"></a></div> -->
        </div>
    </div>
</div>


<script>
    var checkboxes = $(".materials");
    var checkedId = [];
    layui.use(['form', 'table','carousel'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            carousel = layui.carousel;
        //展示组图弹窗
        window.openPicarr=function(obj){
            let picarr = $(obj).attr("data-picarr");
            let arr=picarr.split(",");
            let html = '';
            for(let i=0;i<arr.length;i++){
                html += '<div class="imgdev"><a href="'+arr[i]+'" target="_blank" ><img src="'+arr[i]+'"></a></div>';
            }

            $("#divimg").html("");
            $("#divimg").html(html);

            //建造实例
            carousel.render({
                elem: '#test1'
                ,width: '100%' //设置容器宽度
                ,arrow: 'always' //始终显示箭头
                ,interval:'5000'
                //,anim: 'updown' //切换动画方式
            });
                        //触发轮播切换事件
            carousel.on('change(test1)', function (obj) {
                i = obj.index
            });

            layer.open({
              type: 1, 
              title:'组图显示',
              area: ['500px', '320px'],
              content: $("#showPicarr") //这里content是一个普通的String
            });
        };

        //复选框 多选
        form.on('checkbox(checkAll)', function(data){
            var elem = data.elem;
            checkboxes.prop("checked", elem.checked);
            getAllId()
        });
        // 列表里的小选择框 materials 与表单的对应
        form.on('checkbox(materials)', function(data){
            var elem = data.elem;
            if (checkboxes.not('input:checked').length) {
                $('#checkAll').prop("checked", false);
            } else {
                $('#checkAll').prop("checked", true);
            }
            getAllId()
        });

        window.getAllId=function(){
            checkedId = [];
            checkboxes.each(function(k, v){
                if ($(v).is(':checked')) {
                    checkedId.push($(v).val())
                }
            })
            form.render()
        }

        //改变排序
        window.checkSort=function(obj){
            let table = $(obj).attr("data-table");
            let id_name = $(obj).attr("data-id_name");
            let id = $(obj).attr("data-id");
            let val = $(obj).val();
            let field = $(obj).attr("data-field");

            $.ajax({
                url:"{:url(CONTROLLER_NAME.'/changeOrderid')}",
                data: {'table':table,'id_name':id_name,'id':id,'field':field,'val':val},
                type:'post',
                dataType:'json',
                success:function(res){
                    // console.log(res);
                    // return false;
                    if(res.errcode == 1){
                        layer.msg(res.message,{icon: 1,time: 1000},function(){
                            location.reload();
                        })
                    }else {
                        layer.msg(res.message,{icon: 2,time: 2000})
                    }
                    // parent.layer.close(index);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });
        };

        //删除
        $(".delete").click(function(){
            let dataurl = $(this).attr('data-url');
            // 删除按钮
            layer.confirm('确认删除？', {
                title:'温馨提示',closeBtn:0,icon:3,
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    type: 'post',
                    url: dataurl,
                    dataType: 'json',
                    success: function (res) {
                        // console.log(res)
                        // return false
                        layer.closeAll();
                        if (res.errcode == 1) {
                            layer.msg(res.message,{icon: 1,time: 1000},function(){
                                //$(obj).parent().parent().parent().remove();
                                location.reload();
                            })
                        } else {
                            layer.msg(res.message,{icon: 2,time: 2000})
                            //layer.alert(data, {icon: 2});  //alert('删除失败');
                        }
                    }
                })
            }, function () {
                layer.closeAll();
            });

        });


        //群删
        $(".all_del").click(function(){
            if(checkedId.length <= 0){
                layer.msg("请选择要删除的信息",{icon: 2,time: 2000})
                return false;
            }
            let ids = checkedId.join(", ");

            console.log(ids)

            layer.confirm('确认删除吗？', {
                title:'温馨提示',closeBtn:0,icon:3,
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    type: 'post',
                    url: "{:url(CONTROLLER_NAME.'/delete')}",
                    data:{'table':"{$module}",ids:ids},
                    dataType: 'json',
                    success: function (res) {
                        layer.closeAll();
                        if (res.errcode == 1) {
                            layer.msg(res.message,{icon: 1,time: 1000},function(){
                                location.reload();
                            })
                        } else {
                            layer.msg(res.message,{icon: 2,time: 2000})
                        }
                    }
                })
            }, function () {
                layer.closeAll();
            });
        });


        //是否开启
        form.on('switch(switchIsOpen)', function(data){
            var checked = data.elem.checked;
            //var role_id = data.elem.value;
            let table = $(data.elem).attr("data-table");
            let id_name = $(data.elem).attr("data-id_name");
            let id = $(data.elem).attr("data-id");
            let field = $(data.elem).attr("data-field");
            console.log(table)
            // var id = data.elem.attributes['switch_id'].nodeValue;
            // var pri_id = data.elem.attributes['switch_pri_id'].nodeValue;
            // var tempId = data.elem.attributes['switch_tempId'].nodeValue;

            $.ajax({
                url:"{:url(CONTROLLER_NAME.'/changeStatus')}",
                data: {'table':table,'checked':checked,'id_name':id_name,'id':id,'field':field},
                type:'post',
                dataType:'json',
                success:function(res){
                    // console.log(res);
                    // return false;
                    if(res.errcode == 1){
                        layer.msg(res.message,{icon: 1,time: 1000},function(){
                            location.reload();
                        })
                    }else {
                        layer.msg(res.message,{icon: 2,time: 2000})
                    }
                    // parent.layer.close(index);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });
           
            
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //var result = JSON.stringify(data.field);
            // layer.alert(result, {
            //     title: '最终的搜索信息'
            // });
            table.reload('currentTableId',{
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
            return false;
        });


    });
</script>

</body>
</html>